<!DOCTYPE html>
<html lang="en">
<head>
    <META charset="utf-8">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

    <title>Gamers' Web</title>
    
    <link   rel="stylesheet" type="text/css"    href="jquery/development-bundle/themes/base/jquery.ui.all.css" />

    <script type="text/javascript"              src="libs/jquery-latest.js"></script>
    <script type="text/javascript"              src="libs/jquery-ui-latest.js"></script>
    <script type="text/javascript"              src="libs/jquery.layout-latest.js"></script>
    <script type="text/javascript"              src="libs/jquery.layout.resizePaneAccordions-1.0.js"></script>
    <script type="text/javascript"              src="libs/resizeTabLayout.js"></script>
    <script type="text/javascript"              src="libs/themeswitchertool.js"></script> 
    <script type="text/javascript"              src="libs/debug.js"></script>      
    <script type="text/javascript"              src="libs/jquery.json-2.2.min.js"></script> 

    <!-- XMPP library -->
    <script type="text/javascript"              src="xmpp_components/strophe/strophe.js"></script>
    <script type="text/javascript"              src="xmpp_components/strophe/flXHR.js"></script>
    <script type="text/javascript"              src="xmpp_components/strophe/strophe.flxhr.js"></script>
            
    <!-- Wait cursor -->
    <link   rel="stylesheet" type="text/css"    href="ui_components/waitcursor/css/showLoading.css"/> 
    <script type="text/javascript"              src="ui_components/waitcursor/js/jquery.showLoading.js"></script>
    
    <!-- Menu bar -->
    <link   rel="stylesheet" type="text/css"    href="ui_components/menubar/menubar.css"/> 
    <script type="text/javascript"              src="ui_components/menubar/menubar.js"></script>    
        
    <!-- Tic Tac Toe implementation -->
    <script type="text/javascript"              src="js/tictactoe/ttt_board.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_location.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_move.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_piece.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_playerType.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_player.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_rules.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_game.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_canvas.js"></script>
    <script type="text/javascript"              src="js/tictactoe/ttt_controller.js"></script>
        
    <!-- Gamers web main -->
    <link 	rel="shortcut icon" type="image/ico"    href="gamersweb_icon_32x32.ico"/>
    <link   rel="stylesheet"    type="text/css"     href="gamersweb.css"/>   
    <script type="text/javascript"                  src="gamersweb_xmpp.js"></script>
    <script type="text/javascript"                  src="gamersweb_main.js"></script>
    <script type="text/javascript"                  src="gamersweb_ui_new.js"></script>
    
</head>
<body>

  <div class="ui-layout-north"  >  
 
      <div class="menubar">
	      <ul>
	         <li><a href="#" menu="connectionsMenu">Connections</a></li>
             <li><a href="#" menu="gamesMenu">Games</a></li>
	         <li><a href="#" menu="aboutMenu">About</a></li>
	      </ul> 
      </div>
   
      <div class="dropmenu" id="connectionsMenu">
          <ul>
             <li><a id="signup" href="#">Sign up</a></li>
             <li><a id="signin" href="#">Sign in</a></li>
             <li><a id="signout" href="#">Sign out</a></li>  
             <!--  <li><a id="exitapp" href="#">Exit application</a></li>  -->
          </ul>      
      </div>
     
      <div class="dropmenu" id="gamesMenu">
          <ul>
             <li><a href="#">Tic Tac Toe</a></li>
          </ul>      
      </div>  
      
      <div class="dropmenu" id="aboutMenu">
          <ul>
             <li><a href="#">Help</a></li>
          </ul>      
      </div>  
         
  </div>

  <div class="ui-layout-south ui-widget-content" style="display: none;"> 
      <h3><span id="status">Placholder text</span></h3>
  </div>

  <div id="centerTabs" class="ui-layout-center">
      <ul id="tabButtons" class="ui-layout-north">
          <li><a href="#tabWelcome">Help</a><span class="ui-icon ui-icon-close"></span></li>
          <li><a href="#tabTicTacToe">Tic Tac Toe</a><span class="ui-icon ui-icon-close"></span></li>                        
      </ul>
    
      <div id="tabPanels" class="ui-layout-center">
          <div id="tabWelcome" class="tab-panel">
              <div class="ui-layout-north"></div>  
              <div id="help" class="ui-layout-center">
                  <p>Welcome to Gamers' Web.</p>
                  <p>Use a pre-existing Jabber account to log in. To create a Jabber account, use <a href="https://register.jabber.org/">Jabber's registration page</a></p>
                  <p>Click on a name in your roster to chat with that person.</p>
                  <p>Enter your message in the input box at the bottom of the opened chat tab, and hit the Send button to send.</p>
                  <p>Currently, it is only possible to play Tic Tac Toe against yourself.</p>
                  <p><b>Developed and tested with Firefox 10. Works with Firefox versions 6+, Chrome and Opera (latest versions). IE is not supported.</b></p>
              </div>
          </div>
        
          <div id="tabTicTacToe" class="tab-panel">
              <div class="ui-layout-north"></div>  
              <div class="ui-layout-center">
              <div id="gameTitles">
                  <div id="gameTitle1">
                      <span id="humanGamer">Guest</span><span class="textRed"> X </span> Vs. Machine <span class="textBlue"> O </span>
                  </div>
                  <div id="gameTitle2">
                  </div>   
                  <div id="gameTitle3">
                      <meta id="playerXsymbol" src="resources/x.png" alt="X"></meta>
                      <meta id="playerYsymbol" src="resources/o.png" alt="O"></meta>                                
                      <img id="currentPlayerSymbol" src="resources/x.png" alt="X" draggable ></img>
                  </div>   
              </div>
              <div>
                  <canvas id="gameboard" width="300" height="300"> </canvas>
              </div>
              <button id="restart">Restart</button>
              <div class="debugInfo">
                  <div>Mouse location on canvas: xPos = <span id="xPos">n/a</span> , yPos = <span id="yPos">n/a</span></div>
                  <div>Last drop location = <span id="location">n/a</span></div>
              </div>
              </div>
          </div>
      </div>
  </div>

  <div class="ui-layout-west" style="display: none;">
      <div id="west_accordion" class="basic">
          <h3 id="account"><a href="#">Account and Status</a></h3>
          <div>
              <div id="connection_create">
                  <span id="login_title">Enter to login:</span><br/>
                  <input id="username" class="jabber-input-field" type="text" placeholder="Your Jabber user name here" autofocus/><br/>
                  <input id="password" class="jabber-input-field" type="password" placeholder="Your Jabber passowrd here"/><br/>
                  <button id="xmpp_connect" class="jabber-input-field">Connect</button>
                  <br/><br/>  
                  <span id="createAccountTitle">Enter to create new account:</span><br/>
                  <input id="newUsername" class="jabber-input-field" type="text" placeholder="New Jabber user name here" autofocus/><br/>
                  <input id="newPassword" class="jabber-input-field" type="password" placeholder="New Jabber passowrd here"/><br/>
                  <input id="newPassword2" class="jabber-input-field" type="password" placeholder="Repeat passowrd here"/><br/>
                  <button id="xmpp_create" class="jabber-input-field">Create</button>
              </div>
                            
              <div id="connection_destroy">
                  <span id="logout_title">You are logged in:</span><br/>
                  <button id="xmpp_disconnect">Disconnect</button>
              </div>  
          </div>

          <h3 id="buddies"><a href="#">Buddies</a></h3>
          <div id='roster-area'>
          	  <span id="roster-area-help">You must be connected to see your roster and add contacts.</span>
              <button id="addContact">Add a contact</button>
              <ul>
              </ul>
          </div>
      </div>
  </div>

  <div class="ui-layout-east" style="display: none;">
      <div class="ui-layout-content">
          <div id="accordion2" class="basic">
              <h3><a href="#">Rooms and Congregations</a></h3>
              <div id="rooms">
              	<p>There are not open rooms and congregations at this time.</p>
              </div>

              <h3><a href="#">Downloads</a></h3>
              <div>
              	<div class="download-section">
					<h3>Gamers' web for Android</h3>
					<p><a href="http://gamersweb.googlecode.com/files/GamersWeb_ver_2.apk">Download</a></p>
					<p>Installation instructions <a href="http://www.ehow.com/how_12006775_manually-install-android-apps.html" target="_blank">here</a></p>
              	</div>
              	<div class="download-section">
              		<h3>Gamers' web IE toolbar</h3>
              		<p><a href="http://gamersweb.googlecode.com/files/toolbar_ver_1.dll">Download</a></p>
              		<p>To install/uninstall, download and register/unregister the DLL as an ActiveX.</p>
	             </div>
              </div>
          </div>
      </div>
  </div>

  <div id="contactDialog" class="hidden">
      <div><label>Email:</label><input type="email" id="contactId"/></div>
      <div><label>Name:</label><input type="text" id="contactName"/></div>
  </div>
    
  <div id="approveDialog" class="hidden">
      <p><span id="approveJid"></span> has requested a subscription to your presence.</p>
      <p>Please approve or deny.</p>
  </div>
    
  <script type="text/javascript">
  if ($.browser.msie)
  {
      alert("Internet Explorer is not yet supported.\nPlease use Firefox 10+ for best results.\nThank you.");
  }
  </script>  
</body>
</html> 